<template>
	<view>
		<view class="page">
			<view class="card">
				<view class="section" id="book_fiction">
					<header>
						<view class="h2">最受关注图书｜虚构类</view>
						<view class="more">更多</view>
					</header>
					<view class="section-content">
						<ul class="row items">
							<li class="item item__book">
								<view href="/book/subject/30396712?refer=home">
									<image class="item-poster" src="https://img3.doubanio.com/view/subject/l/public/s33296332.jpg" />
									<text class="item-title">尸人庄谜案</text>
									<view class="item-rating">
										<view class="rank">
											<view class="rating-stars" data-rating="3.7">
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
											</view>
											<text>7.4</text>
										</view>
									</view>
								</view>
							</li>
							<li class="item item__book">
								<view href="/book/subject/34451942?refer=home">
									<image class="item-poster" src="https://img3.doubanio.com/view/subject/l/public/s33438372.jpg" />
									<text class="item-title">闯入者</text>
									<view class="item-rating">
										<view class="rank">
											<view class="rating-stars" data-rating="3.7">
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
											</view>
											<text>8.4</text>
										</view>
									</view>
								</view>
							</li>
							<li class="item item__book">
								<view href="/book/subject/34451942?refer=home">
									<image class="item-poster" src="https://img3.doubanio.com/view/subject/l/public/s33499480.jpg" />
									<text class="item-title">闯入者</text>
									<view class="item-rating">
										<view class="rank">
											<view class="rating-stars" data-rating="3.7">
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
											</view>
											<text>8.4</text>
										</view>
									</view>
								</view>
							</li>
							<li class="item item__book">
								<view href="/book/subject/34451942?refer=home">
									<image class="item-poster" src="https://img1.doubanio.com/view/subject/l/public/s33317677.jpg" />
									<text class="item-title">闯入者</text>
									<view class="item-rating">
										<view class="rank">
											<view class="rating-stars" data-rating="3.7">
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
											</view>
											<text>8.4</text>
										</view>
									</view>
								</view>
							</li>
							<li class="item item__book">
								<view href="/book/subject/34451942?refer=home">
									<image class="item-poster" src="https://img3.doubanio.com/view/subject/l/public/s33438372.jpg" />
									<text class="item-title">闯入者</text>
									<view class="item-rating">
										<view class="rank">
											<view class="rating-stars" data-rating="3.7">
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
											</view>
											<text>8.4</text>
										</view>
									</view>
								</view>
							</li>
							<li class="item item__book">
								<view href="/book/subject/34451942?refer=home">
									<image class="item-poster" src="https://img3.doubanio.com/view/subject/l/public/s33438372.jpg" />
									<text class="item-title">闯入者</text>
									<view class="item-rating">
										<view class="rank">
											<view class="rating-stars" data-rating="3.7">
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
												<image class="rating-star small-gray" src="" />
											</view>
											<text>8.4</text>
										</view>
									</view>
								</view>
							</li>
						</ul>
					</view>
				</view>

				<view class="section" id="book_nonfiction">
					<header>
						<view class="h2">最受关注图书｜非虚构类</view>
						<view class="more">更多</view>
					</header>
					<view class="section-content">
						<ul class="row items">
							<li class="item item__book">
								<view href="/book/subject/34430051?refer=home">
									<image class="item-poster" src="https://img3.doubanio.com/view/subject/l/public/s33296515.jpg" />
									<text class="item-title">大脑健身房</text>
									<view class="item-rating">
										<view class="rank">
											<text class="rating-stars" data-rating="4.0"><text class="rating-star rating-star-small-full"></text><text
												 class="rating-star rating-star-small-full"></text><text class="rating-star rating-star-small-full"></text><text
												 class="rating-star rating-star-small-full"></text><text class="rating-star rating-star-small-gray"></text></text>
											<text>8.0</text>
										</view>
									</view>
								</view>
							</li>
							<li class="item item__book">
								<view href="/book/subject/30217954?refer=home">
									<image class="item-poster" src="https://img1.doubanio.com/view/subject/l/public/s33477929.jpg" />
									<text class="item-title">告别的仪式</text>
									<view class="item-rating">
										<view class="rank">
											<text class="rating-stars" data-rating="4.2"><text class="rating-star rating-star-small-full"></text><text
												 class="rating-star rating-star-small-full"></text><text class="rating-star rating-star-small-full"></text><text
												 class="rating-star rating-star-small-full"></text><text class="rating-star rating-star-small-gray"></text></text>
											<text>8.3</text>
										</view>
									</view>
								</view>
							</li>
							<li class="item item__book">
								<view href="/book/subject/34786067?refer=home">
									<image class="item-poster" src="https://img1.doubanio.com/view/subject/l/public/s33496317.jpg" />
									<text class="item-title">伦敦人</text>
									<view class="item-rating">
										<view class="rank">
											<text class="rating-stars" data-rating="4.3"><text class="rating-star rating-star-small-full"></text><text
												 class="rating-star rating-star-small-full"></text><text class="rating-star rating-star-small-full"></text><text
												 class="rating-star rating-star-small-full"></text><text class="rating-star rating-star-small-gray"></text></text>
											<text>8.7</text>
										</view>
									</view>
								</view>
							</li>
						</ul>
					</view>
				</view>

				<view class="section interests">
					<header>
						<h2>发现好图书</h2>
					</header>
					<view class="section-content">
						<ul>
							<li style="border-color: #CC3344;"><view href="https://m.douban.com/doulist/10372/" style="color: #CC3344;">小波看书</view></li>
							<li style="border-color: #4F9DED;"><view href="https://m.douban.com/doulist/35573/" style="color: #4F9DED;">不可饶恕的女人们</view></li>
							<li class="line"></li>
							<li style="border-color: #2384E8;"><view href="https://m.douban.com/doulist/38088147/" style="color: #2384E8;">爱欲书</view></li>
						</ul>
					</view>
				</view>

				<view class="section types">
					<header>
						<h2>分类浏览</h2>
					</header>
					<view class="section-content">

						<view name="cate"></view>
						<ul class="type-list">
							<li><view href="/book/fiction">虚构类图书<text></text></view></li>
							<li><view href="/book/nofiction">非虚构类图书<text></text></view></li>
							<li><view href="/book/classic">名著经典<text></text></view></li>
							<li><view href="/book/film_original">影视原著<text></text></view></li>
							<li><view href="/book/lastest">新书速递<text></text></view></li>
							<li><view href="/book/score">高分图书<text></text></view></li>
							<li><view href="/book/hot">热门图书<text></text></view></li>
							<li><view href="/book/top250">top250<text></text></view></li>
						</ul>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {

		}
	}
</script>

<style>
.page {
	max-width: 650px;
	padding-top: 0px;
	background: #fff;
	margin: 0 auto;
	overflow-x: hidden;
}
.card {
    margin: 0;
}
.section {
    margin: 0;
    background-color: #fff;
}
.section-content {
}
.row {
    padding: 30rpx 0 30rpx 0;
}
.items {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
header {
	padding: 20rpx 16rpx 0rpx;
}
.h2 {
	display: inline-block;
	margin-bottom: 0;
	color: #111;
	padding-left: 0;
	padding-bottom: 0;
	font-size: 35rpx;
	line-height: 35rpx;
}
.more {
	float: right;
	margin-bottom: 0;
	padding-bottom: 0;
	font-size: 30rpx;
	line-height: 35rpx;
	color: #42bd56;
	text-decoration: none;
	margin-top: 4rpx;
}
.item:first-child {
    margin-left: 30rpx;
}
.item {
    display: inline-block;
    vertical-align: top;
    width: 200rpx;
    text-align: center;
	margin-left: 20rpx;
}
.item-poster {
    width: 100%;
	height: 284rpx;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border-radius: 8rpx;
}
.item-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	display: block;
	margin-top: 10rpx;
	line-height: 30rpx;
	font-size: 28rpx;
}
.item-rating {
    color: #818181;
    line-height: 24rpx;
    margin-top: 12rpx;
    font-size: 24rpx;
}
.rating-stars {
    display: inline-block;
    vertical-align: middle;
}
.rating-stars .rating-star {
    display: inline-block;
    margin-right: 2rpx;
    background-color: transparent;
    background-repeat: no-repeat;
}
.rating-stars .rating-star {
    display: inline-block;
    margin-right: 2rpx;
    background-color: transparent;
    background-repeat: no-repeat;
}
.small-gray {
    width: 20rpx;
    height: 20rpx;
    background-size: 20rpx 20rpx;
}

</style>
